<template>
    <!-- <div class="box bg">
        <div class="status">{{ state.info.status == '0' ? '待付款...' : state.info.status == '1' ? '已付款...' :
            state.info.status == '2' ? '待接单...' : state.info.status == '3' ? '出发中...'
                : state.info.status == '4' ? '进行中...' : state.info.status == '5' ? '已完成...' :
                    state.info.status == '6' ? '待评价...' : state.info.status == '-1' ? '待退款...'
                        : state.info.status == '-2' ? '已退款...' : state.info.status == '-3' ? '已取消...' : '' }}</div>
        <nut-steps :current="state.current" @click-step="onClickStep">
            <nut-step title="等待接单">1</nut-step>
            <nut-step title="正在出发">2</nut-step>
            <nut-step title="已经到达">3</nut-step>
            <nut-step title="开始服务">4</nut-step>
            <nut-step title="服务完成">5</nut-step>
        </nut-steps>
    </div> -->
    <div class="box">
        <div class="status-title flex-a flex-b">
            <div>订单状态</div>
            <div>{{ state.info.status == '0' ? '待付款' : state.info.status == '1' ? '已付款' :
                state.info.status == '2' ? '待接单' : state.info.status == '3' ? '出发中'
                    : state.info.status == '4' ? '进行中' : state.info.status == '5' ? '已完成' :
                        state.info.status == '6' ? '待评价' : state.info.status == '-1' ? '待退款'
                            : state.info.status == '-2' ? '已退款' : state.info.status == '-3' ? '已取消' : '' }}</div>
        </div>
        <div class="status flex-a flex-b">
            <div :class="state.current == 1 ? 's-item act1' : 's-item'" @click="onStep(1)">
                <div class="s-num">1</div>
                <div class="s-txt">等待接单</div>
            </div>
            <div :class="state.current == 2 ? 's-item act2' : 's-item'" @click="onStep(2)">
                <div class="s-num">2</div>
                <div class="s-txt">正在出发</div>
            </div>
            <div :class="state.current == 3 ? 's-item act3' : 's-item'" @click="onStep(3)">
                <div class="s-num">3</div>
                <div class="s-txt">已经到达</div>
            </div>
            <div :class="state.current == 4 ? 's-item act4' : 's-item'" @click="onStep(4)">
                <div class="s-num">4</div>
                <div class="s-txt">开始服务</div>
            </div>
            <div :class="state.current == 5 ? 's-item act5' : 's-item'" @click="onStep(5)">
                <div class="s-num">5</div>
                <div class="s-txt">服务完成</div>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="user-info flex-b flex-a">
            <div>用户信息</div>
            <div>
                <img src="https://cxj.szzkba.cn/upload/i/2024/09/27/140710_1.png" alt="">
                <img src="https://cxj.szzkba.cn/upload/i/2024/09/27/140710.png
" alt="">
            </div>
        </div>
        <div class="flex-a addr-box">
            <div class="img">
                <img :src="state.info.user ? state.info.user.image_Url : ''" alt="">
            </div>
            <div class="address">
                <div class="flex-a flex-b">
                    <div class="flex-a"><span>{{ state.info.user ? state.info.user.user_Nickname : ''
                            }}</span>
                        <!-- <div class="flex-a"><span>{{ state.info.user ? state.info.sysUser.userName : '' }}</span>
                            <img src="https://cxj.szzkba.cn/upload/i/2024/07/19/155613.png"
                                @click="callPhone(state.info.sysUser.userName)" />
                        </div> -->
                        <div class="flex-a level">
                            <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748.png"
                                v-if="state.info.user.level == '1'" alt="">
                            <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748_1.png"
                                v-if="state.info.user.level == '2'" alt="">
                            <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748_2.png"
                                v-if="state.info.user.level == '3'" alt="">
                            <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748_3.png"
                                v-if="state.info.user.level == '4'" alt="">
                            <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141749.png"
                                v-if="state.info.user.level == '5'" alt="">
                            <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141749_1.png"
                                v-if="state.info.user.level == '6'" alt="">
                            <span :class="'c' + state.info.user.level">{{ state.info.user.level == '1' ? '小白' :
                                state.info.user.level
                                    == '2'
                                    ? '初级' : state.info.user.level == '3' ? '中级' : state.info.user.level == '4'
                                        ? '高级' : state.info.user.level == '5' ? '特级' : state.info.user.level == '6' ? '明星' : ''
                                }}</span>
                        </div>
                    </div>
                    <!-- <nut-button plain type="info" size="mini">导航</nut-button> -->
                </div>

            </div>
        </div>
    </div>
    <div class="box">
        <div class="title">项目信息</div>
        <div class="pro flex">
            <div class="left">
                <img :src="state.info ? state.info.pageSetting.remark : ''" alt="">
            </div>
            <div class="middle">
                <div class="flex-a flex-b name">
                    <span>{{ state.info ? state.info.pageSetting.project_Name : '' }}</span>
                    <span></span>
                    <!-- <span>x{{ state.info ? state.info.count : '' }}</span> -->
                </div>
                <!-- <div class="time">{{ state.info.pageSettingSec ? state.info.pageSettingSec.project_Name : '' }}</div> -->
                <div class="time flex-a flex-b">
                    <div>服务时长：{{ state.info ? state.info.count * 60 : 0 }}分钟</div>
                    <div>x{{ state.info.count }}</div>
                </div>
                <!-- <div class="time">预约时间：{{ state.info ? state.info.service_Time : '' }}</div> -->
                <div class="price flex-a">
                    <!-- <div>优惠￥{{ state.info.less }}</div> -->
                    <!-- <div class="flex">实付<span>￥{{ state.info ? state.info.service_Amount : 0 }}</span></div> -->
                </div>
            </div>
        </div>
        <div class="money flex-a flex-b">
            <div>服务金额：</div>
            <div>￥{{ state.info ? state.info.service_Amount : '0' }}</div>
        </div>
        <div class="item flex-a flex-b">
            <div>下单客户：</div>
            <div>{{ state.info ? state.info.sysUser.nickName : '无' }}</div>
        </div>
        <div class="item flex-a flex-b">
            <div>预约时间：</div>
            <div>{{ state.info ? state.info.service_Time : '' }}</div>
        </div>
        <div class="item flex-a flex-b">
            <div>服务地址：</div>
            <div>{{ state.info ? state.info.service_Addr : '' }}</div>
        </div>
        <div class="item flex-a flex-b">
            <div>订单备注：</div>
            <div>{{ state.info ? state.info.remark : '无' }}</div>
        </div>
        <div class="item flex-a flex-b">
            <div>订单编号：</div>
            <div>{{ state.info ? state.info.order_No : '无' }}</div>
        </div>
        <div class="item flex-a flex-b">
            <div>下单时间：</div>
            <div>{{ state.info ? state.info.CreatedAt : '无' }}</div>
        </div>
        <!-- <div class="item flex-a flex-b">
            <div>付款时间</div>
            <div>2023-12-21 12：00：00</div>
        </div> -->
    </div>
    <div style="background: #ffffff;border-radius:5%;margin-top:5%;">
        <div class="flex-a flex-b btns">
            <nut-button color="#F0A93F" style="border-radius: 10rpx;" @click="toPay"
                v-if="state.info.status == 0">去付款</nut-button>
            <nut-button color="#F0A93F" style="border-radius: 10rpx;" plain @click="resetOrder"
                v-if="state.info.status == 0">取消订单</nut-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { getFindOrders, pay, changeOrder } from '../../../../api/index'
import Taro, { useRouter } from '@tarojs/taro';
const state = reactive({
    current: 1,
    id: '',
    info: {
        sysUser: {},
        pageSetting: {},
        user: {
            level: ''
        }
    },
    user: {}
})
onMounted(() => {
    Taro.getStorage({
        key: 'user',
        success: function (res) {
            state.user = res.data ? res.data : {}
        }
    })
    const router = useRouter();
    if (router.params.id) {
        state.id = router.params.id
        getDetail(router.params.id)
    }
})
// const jumpTo = (path) => {
//     Taro.navigateTo({ url: path })
// }
const onClickStep = () => { }
const getDetail = (id) => {
    getFindOrders({ ID: id }).then(res => {
        if (res.code == 0) {
            state.info = res.data.reorders
            console.log(state.info)
            state.current = state.info.status
            if (state.current > 2) {
                state.current = state.current - 1
            }
            state.info.CreatedAt = reTime(state.info.CreatedAt)
            state.info.sysUser.userName = state.info.sysUser.userName.substr(0, 3) + "****" + state.info.sysUser.userName.substr(7);
        }
    })
}
const addZero = (n) => {
    return n < 10 ? '0' + n : n
}
const reTime = (t) => {
    let time = new Date(t)
    let y = time.getFullYear()
    let m = addZero(time.getMonth() + 1)
    let d = addZero(time.getDate())
    let h = addZero(time.getHours())
    let f = addZero(time.getMinutes())
    let s = addZero(time.getSeconds())
    return y + '-' + m + '-' + d + ' ' + h + ':' + f + ':' + s
}
const callPhone = (num) => {
    Taro.makePhoneCall({
        phoneNumber: num
    })
}
const toPay = () => {
    pay({
        order_No: state.info.order_No,
        openId: state.user.openId,
        title: '支付调用',
        remark: '',
    }).then(res => {
        if (res.code == 0) {
            Taro.requestPayment({
                timeStamp: res.data.timeStamp,
                nonceStr: res.data.nonceStr,
                package: res.data.package,
                signType: res.data.signType,
                paySign: res.data.paySign,
                success: function (res) {
                    getDetail(state.id)
                },
            })
        }
    })
}
const resetOrder = () => {
    changeOrder({ order_No: state.info.order_No, status: -3 }).then(res => {
        if (res.code == 0) {
            getDetail(state.id)
        }
    })
}
const onStep = (num) => {
    // state.current = num
}
</script>
<style lang="scss">
.nut-step-process {
    .nut-step-icon {
        background: #496AF2 !important;
    }

    .nut-step-title {
        font-weight: bold;
        color: #909CA4 !important;
    }
}

.box {
    background: #ffff;
    padding: 30rpx 40rpx 20rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;

    .status-title {
        div:first-child {
            font-weight: bold;
            color: #232544;
            font-size: 30rpx;
        }

        div:last-child {
            color: #FE0303;
            font-weight: bold;
            font-size: 30rpx;
        }
    }

    .status {
        margin-top: 40rpx;
        padding-bottom: 20rpx;

        .s-item {
            text-align: center;
            width: 22%;
            height: 120rpx;
            padding: 15rpx 0;
            box-sizing: border-box;

            .s-num {
                width: 50rpx;
                height: 50rpx;
                text-align: center;
                line-height: 50rpx;
                border-radius: 50%;
                background: #E5D0B3;
                color: #fff;
                margin: 0 auto;
            }

            .s-txt {
                color: #B8A68B;
                margin-top: 10rpx;
                font-size: 24rpx;
                white-space: nowrap;
            }
        }

        .s-item:first-child {
            background: url('https://cxj.szzkba.cn/upload/i/2024/09/29/152953.png')no-repeat 0 0;
            background-size: 100% 100%;
        }

        .s-item:nth-child(2),
        .s-item:nth-child(3),
        .s-item:nth-child(4) {
            background: url('https://cxj.szzkba.cn/upload/i/2024/09/29/153644.png')no-repeat 0 0;
            background-size: 100% 100%;
            margin-left: -60rpx;
        }

        .s-item:nth-child(5) {
            background: url('https://cxj.szzkba.cn/upload/i/2024/09/29/153731.png')no-repeat 0 0;
            background-size: 100% 100%;
            margin-left: -63rpx;
        }

        .s-item.act1 {
            background: url('https://cxj.szzkba.cn/upload/i/2024/09/29/155118.png')no-repeat 0 0;
            background-size: 100% 100%;

            .s-num {
                background: #fff;
                color: #F1AF4C;
            }

            .s-txt {
                color: #fff;
            }
        }

        .s-item.act2,
        .s-item.act3,
        .s-item.act4 {
            background: url('https://cxj.szzkba.cn/upload/i/2024/09/29/155231.png')no-repeat 0 0;
            background-size: 100% 100%;

            .s-num {
                background: #fff;
                color: #F1AF4C;
            }

            .s-txt {
                color: #fff;
            }
        }

        .s-item.act5 {
            background: url('https://cxj.szzkba.cn/upload/i/2024/09/29/155254.png')no-repeat 0 0;
            background-size: 100% 100%;

            .s-num {
                background: #fff;
                color: #F1AF4C;
            }

            .s-txt {
                color: #fff;
            }
        }
    }

    .user-info {
        div:first-child {
            color: #202342;
            font-weight: bold;
            font-size: 28rpx;
            margin-bottom: 20rpx;
        }

        img {
            width: 30rpx;
            height: 30rpx;
            padding: 10rpx;
            border-radius: 50%;
            background: #F8F1E7;
        }

        img:first-child {
            margin-right: 10rpx;
        }
    }

    .addr-box {
        .img {
            img {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
                margin-right: 20rpx;
            }
        }

        .address {
            width: 80%;

            img {
                width: 40rpx;
                height: 40rpx;
            }

            div {
                white-space: nowrap;
            }

            div:first-child {
                margin-bottom: 10rpx;

                span:first-child {
                    font-weight: bold;
                    font-size: 26rpx;
                    margin-right: 20rpx;
                    color: #070A2C;
                }

                span:last-child {
                    font-size: 26rpx;
                    font-weight: bold;
                }
            }

            div:last-child {
                font-size: 26rpx;
                white-space: nowrap;
            }
        }
    }

    .address {
        font-size: 30rpx;
        color: #666;
        width: 60%;
    }

    .title {
        color: #202342;
        font-weight: bold;
        font-size: 28rpx;
        margin-bottom: 20rpx;
    }

    .pro {
        margin-top: 20rpx;
        border-bottom: 1rpx solid #F2F2F2;
        padding-bottom: 20rpx;

        img {
            width: 80rpx;
            height: 80rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
        }

        .middle {
            width: 100%;

            .name {
                font-size: 28rpx;
                font-weight: bold;
                margin-bottom: 10rpx;

                span:last-child {
                    color: #666;
                    font-size: 24rpx;
                    font-weight: normal;
                }
            }

            .time {
                color: #9E9EA9;
                font-size: 26rpx;
            }
        }
    }

    .money {
        font-size: 28rpx;
        padding: 20rpx 0 0 0;
        margin-bottom: 20rpx;
        color: #3D405B;

        div:first-child {
            color: #A3A4AF;
        }
    }

    .item {
        font-size: 26rpx;
        margin-bottom: 20rpx;
        color: #3D405B;

        div:first-child {
            color: #A3A4AF;
        }
    }

}

.btns {
    padding: 20rpx 40rpx;

    .nut-button {
        width: 48%;
    }
}

.box.bg {
    background: #FAEBD8;
}

.level {
    span {
        font-size: 20rpx !important;
        margin-left: 5rpx;
        text-align: center;
        clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
        padding-left: 8rpx !important;
        background: #6574AB;
        color: #EBF7FF;
        padding: 0 8rpx;
        border-radius: 4rpx;

    }

    .c1 {
        background: #6574AB;
    }

    .c2 {
        background: #007DC4;
    }

    .c3 {
        background: #7B1DD3;
    }

    .c4 {
        background: #EB5B00;
    }

    .c5 {
        background: #FD5131;
    }

    .c6 {
        background: #F61C36;
    }

    img {
        width: 45rpx;
        height: 45rpx;
    }

    .info {
        display: inline-block;
        width: 92%;
        border-radius: 10rpx;
        background: #F5F5F5;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 26rpx;
        text-align: center;
    }
}
</style>